<template>
    <div class="pay">
        <header>
            <div class="back" @click="back">
                <van-icon name="arrow-left" size="32" color="#5a5a5a" />
            </div>
        </header>
        <main>
            <p>￥{{ price / 100 }}</p>
            <div class="btn">
                <div class="n" @click="back">取消</div>
                <div class="y" @click="okPrice">支付</div>
            </div>
        </main>
    </div>
</template>

<script>
export default {
    props: ["dataArr", "account", "setDataArr"],
    data() {
        return {
            price: 0,
            type: 0,
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        historyShop() {
            let arr = this.dataArr.filter((i) => {
                return i.checked;
            });
            console.log(arr);
            console.log(this.account);
            this.axios
                .post("http://127.0.0.1/setPurchaseRecord", {
                    data: {
                        account: this.account,
                        arr,
                    },
                })
                .then(({ data }) => {
                    console.log(data);
                });
        },
        okPrice() {
            this.historyShop();
            if (this.type) {
                let arr = this.dataArr.filter((i) => {
                    return !i.checked;
                });
                this.axios
                    .post("http://127.0.0.1/setshoppingcart", {
                        data: {
                            account: this.account,
                            arr,
                        },
                    })
                    .then(({ data }) => {
                        this.$emit("setDataArr", { data: data.data, selectPrice: 0 });
                        this.$toast.success("购买成功");
                        this.$router.go(-1);
                    });
            } else {
                this.$toast.success("购买成功");
                this.$router.push({ name: "shopping" });
            }
        },
    },
    mounted() {
        this.price = this.$route.params.price;
        this.type = this.$route.params.type;
    },
};
</script>

<style lang="scss" scoped>
.pay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 9999;
}
.back {
    width: 100vw;
    height: 2.625rem;
    padding: 0.3125rem 2vw;
    box-sizing: border-box;
}
p {
    margin-top: 5vh;
    font-size: 36px;
    font-weight: 600;
    height: 30vh;
    line-height: 30vh;
    text-align: center;
}
.btn {
    width: 90vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    & > div {
        width: 35vw;
        height: 3.4375rem;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 3.4375rem;
        border-radius: 20px;
    }
    .n {
        background-color: #ccc;
    }
    .y {
        background-color: #1ba784;
    }
}
</style>
